<template>
    <view class="container">
        <view class="title"></view>
        <view class="inputlist">
            <view>
                <view class="label">商户号</view>
                <input
                    type="text"
                    v-model="companyId"
                    placeholder-style="font-size:28rpx;color:#BCBFCC;"
                    placeholder="请输入商户号" />
            </view>
            <view>
                <view class="label">手机号</view>
                <input
                    type="number"
                    v-model="tel"
                    maxlength="11"
                    placeholder-style="font-size:28rpx;color:#BCBFCC;"
                    placeholder="请输入手机号" />
            </view>
            <view>
                <view class="label">验证码</view>
                <view class="verification">
                    <input
                        type="number"
                        v-model="code"
                        placeholder-style="font-size:28rpx;color:#BCBFCC;"
                        placeholder="请输入验证码" />
                    <view class="line"></view>
                    <button class="get" :disabled="disabled" @click="getCode">
                        {{ countdown }}<text v-show="timestatus">秒重获</text>
                    </button>
                </view>
            </view>
            <button class="btn btn-success btn-save" @click="submit">提交</button>
        </view>
    </view>
</template>

<script>
import { getRemainTime } from "@/uni-sub-base/utils/utils"
import storage from "@/uni-sub-base/utils/storage.js"
import config from "@/config/config.js"
import { BusinessLogin } from "@/pages_supplier/service/api/authorize.js"
import { SendSmsNoVerifyCode } from "@/pages_supplier/service/api/member.js"
import { CheckSupplier } from "@/pages_supplier/service/api/supplier.js"
export default {
    components: {},
    data() {
        return {
            companyId: "",
            tel: "",
            code: "",
            password: "",
            password2: "",
            click: true,
            timestatus: false,
            disabled: false,
            countdown: "获取验证码",
        }
    },
    onLoad(e) {},
    mounted() {},
    methods: {
        getCode() {
            var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
            var that = this
            if (that.tel == "") {
                this.easyToast("请输入手机号码")
                return false
            } else if (!myreg.test(that.tel)) {
                this.easyToast("请输入正确手机号码")
                return false
            } else {
                let path = "?tel=" + that.tel + "&validType=8"
                SendSmsNoVerifyCode(path)
                    .then((res) => {
                        that.disabled = true //禁用点击
                        if (res.State == 1) {
                            that.countdown = 60
                            that.timestatus = true
                            that.clear = setInterval(that.countDown, 1000)
                        } else {
                            this.easyToast(res.Msg)
                            that.disabled = false
                        }
                    })
                    .catch((err) => {
                        console.log(err)
                        that.disabled = false
                    })
            }
        },
        countDown() {
            var that = this
            if (!that.countdown) {
                that.disabled = false
                that.timestatus = false
                that.countdown = "获取验证码"
                clearInterval(that.clear)
            } else {
                --that.countdown
            }
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        submit() {
            var that = this
            var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
            if (that.companyId == "") {
                this.easyToast("请输入商户号")
                return false
            } else if (that.tel == "") {
                this.easyToast("请输入手机号码")
                return false
            } else if (!myreg.test(that.tel)) {
                this.easyToast("请输入正确手机号码")
                return false
            } else if (this.code == "") {
                this.easyToast("请输入验证码")
                return false
            }
            let path = "?Tel=" + that.tel + "&ValidCode=" + that.code + "&validType=8&companyId=" + that.companyId
            CheckSupplier(path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("该账号已存在，请直接登录")
                    setTimeout((e) => {
                        this.goUrl("/pages/login/index")
                    }, 2000)
                } else if (res.State == 0 && res.Data == 0 && res.Msg != "商户号不存在") {
                    this.goUrl(
                        "/pages_supplier/packet/shopEnter/index?tel=" + that.tel + "&companyId=" + that.companyId,
                    )
                } else if (res.State == 2 && res.Data == 0 && res.Msg == "验证失败") {
                    this.easyToast(res.Msg)
                } else if (res.State == 0 && res.Data == 0 && res.Msg == "商户号不存在") {
                    this.easyToast(res.Msg)
                } else {
                    this.goUrl("/pages_supplier/packet/login/result?data=" + JSON.stringify(res))
                }
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: 126rpx 60rpx 60rpx 60rpx;
}

.title {
    font-size: 50rpx;
    color: $color-gray-1;
}

.inputlist {
    padding: 50rpx 0 0 0;

    & > view {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 98rpx;
        background: #ffffff;
        border-radius: 24rpx;
        margin-bottom: 24rpx;
        padding: 0 24rpx;
    }

    .label {
        width: 145rpx;
        font-size: 28rpx;
        color: $color-gray-1;
    }

    input {
        flex: 1;
        height: 98rpx;
        font-size: 36rpx;
        color: $color-gray-1;
    }

    .verification {
        flex: 1;
        display: flex;
        align-items: center;

        .line {
            width: 2rpx;
            height: 48rpx;
            background: #efefef;
            margin-right: 24rpx;
        }

        .get {
            color: $app-color-main;
            height: 98rpx;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            padding: 0;
            margin: 0;
            background: none;
            border: none;
            outline: none;

            &::after {
                border: none;
            }
        }
    }
}

.btn {
    margin-top: 48rpx;
    width: 284rpx;
}
</style>
